<template>
  <ul class="header-tabs">
    <li class="header-tabs-item" :class="{active : 'playlist' === defaultActive}">
      <span class="header-tabs-item-title" @click="changeActive('playlist')">歌曲列表</span>
    </li>
    <li class="header-tabs-item" :class="{active : 'comment' === defaultActive}">
      <span class="header-tabs-item-title" @click="changeActive('comment')">评论({{commentCount}})</span>
    </li>
  </ul>
  <ul v-show="defaultActive === 'playlist'" class="playlist">
    <li class="playlistHeader">
      <span class="kongbai"></span>
      <span class="title">音乐标题</span>
      <span class="singer">歌手</span>
      <span class="album">专辑</span>
      <span class="duration">时长</span>
    </li>
    <li
      v-for="(item, index) of songs" :key="item"
      @dblclick="selectSong(item.id)"
      :class="{
        'playlistItem': true,
        'playlistActive': item.id === target
      }"
    >
      <div class='kongbai'>
        <span v-if="item.id !== target" class="index">{{(index + 1).toString().padStart(2, '0')}}</span>
        <i v-if="item.id === target && playing" class="iconfont iconyangshengqispeaker85 index"></i>
        <i v-if="item.id === target && !playing" class="iconfont iconyangshengqispeaker88 index"></i>
        <i class="iconfont iconxihuan"></i>
        <i class="iconfont iconxiazai"></i>
      </div>
      <div class="title">
        <span class="title-name">{{ item.name }}</span>
        <span v-if="item.mv !== 0" class="mv" @click="selectMv(item.mv)">MV</span>
      </div>
      <div class="singer">
        <template v-for="(artist, artistsCount) of item.artists" :key="artist">
          <span>{{artist.name}}</span>
          <span v-if="artistsCount !== item.artists.length - 1" class="geli">/</span>
        </template>
      </div>
      <div class="album">{{ item.alName }}</div>
      <div class="duration">{{ item.duration }}</div>
    </li>
  </ul>
  <div v-show="defaultActive === 'comment'" class="comment">
    <UsualComment/>
    <HotsComment :hotsCommentsList='hotsComment' />
    <Comment
      ref="commentRef"
      :commentsList="lastestComment"
      :totals="totals"
    />
    <Page
      ref="pageRef"
      :limit="limit"
      :offset="offset"
      :totals="totals"
      @changeOffset="changeOffset"
    />
  </div>
</template>

<script lang="ts">
import { ref, computed, watch, nextTick } from 'vue'
import UsualComment from '@/components/usualComment/index.vue'
import Comment from '@/components/comment/index.vue'
import HotsComment from '@/components/hotsComment/index.vue'
import Page from '@/components/page/index.vue'
import { getPlaylistComment, getPlaylistLastestComment } from '@/api/playLists'
import { player } from '@/store/modules/player'
import { useRouter } from 'vue-router'

export default {
  name: 'playlistContent',
  props: {
    id: Number,
    commentCount: {
      type: Number,
      default: 0
    },
    songs: {
      type: Array,
      default: () => []
    }
  },
  emits: ['backTop'],
  components: {
    UsualComment,
    Comment,
    HotsComment,
    Page
  },
  setup (props, context) {
    const router = useRouter()
    const defaultActive = ref<string>('playlist')
    const limit = ref<number>(20)
    const offset = ref<number>(0)
    const totals = ref<number>(0)
    const hotsComment = ref<any[]>([])
    const lastestComment = ref<any[]>([])
    const playing = computed(() => player.playing)
    const target = computed(() => player.currentSongLists[player.currentIndex])
    const commentRef = ref<Element | null>(null)
    const pageRef = ref<Element | null>(null)
    const changeActive = (active) => {
      defaultActive.value = active
    }
    const changeOffset = async (number) => {
      offset.value = number
      try {
        const { commentsList } = await getPlaylistLastestComment({ id: props.id, limit: limit.value, offset: number })
        lastestComment.value = commentsList
        nextTick(() => {
          // @ts-ignore
          const offsetHeight = commentRef.value.$el.offsetHeight + commentRef.value.$el.offsetHeight
          // @ts-ignore
          const commentOffsetTop = commentRef.value.$el.offsetTop
          context.emit('backTop', offsetHeight, commentOffsetTop)
        })
      } catch (e) {
        console.log(e)
      }
    }
    const selectSong = (id) => {
      player.selectDanqu(id)
    }
    const selectMv = (mv) => {
      router.push({ name: 'video', params: { id: mv } })
    }
    watch(() => props.id, async (value) => {
      offset.value = 0
      try {
        const { commentsList, hotCommentsList, total } = await getPlaylistComment({ id: value, limit: limit.value, offset: offset.value })
        hotsComment.value = hotCommentsList
        lastestComment.value = commentsList
        totals.value = total
      } catch (e) {
        console.log(e)
      }
    })
    return {
      commentRef,
      pageRef,
      defaultActive,
      offset,
      limit,
      totals,
      hotsComment,
      lastestComment,
      target,
      playing,
      changeActive,
      changeOffset,
      selectSong,
      selectMv
    }
  }
}
</script>

<style lang="scss" scoped>
.header-tabs {
  display: flex;
  width: 100%;
  height: 40px;
  padding-left: 20px;
  background-color: #fff;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;

  .header-tabs-item {
    margin-right: 24px;
    font-size: 15px;
    color: #333;
    cursor: pointer;
  }

  .active {
    position: relative;
    font-size: 14px;
    font-weight: bold;

    &::after {
      position: absolute;
      bottom: -10px;
      left: 10%;
      display: block;
      width: 80%;
      height: 3px;
      background-color: #ec4141;
      border-radius: 3px;
      content: '';
    }
  }
}

.playlist {
  width: 100%;
  font-size: 13px;

  .playlistItem:nth-of-type(even) {
    background-color: #f8f8f8;
  }

  .playlistItem:nth-of-type(odd) {
    background-color: #f0f0f0;
  }

  .playlistHeader {
    color: #666666;
  }

  li {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    text-align: left;
    height: 40px;

    .kongbai {
      flex: 0 0 120px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-end;
      color: #bdbdbd;

      >i {
        margin-right: 15px;
      }

      .index {
        margin-right: 20px;
      }
    }

    .title {
      flex: 0 0 320px;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      padding-left: 20px;

      .title-name{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        line-height: 1.4;
      }

      .mv {
        border: 1px solid #ec4141;
        color: #ec4141;
        background-color: #fef6f6;
        padding: 1px 1px;
        border-radius: 3px;
        margin-left: 6px;
        cursor: pointer;
      }
    }

    .singer {
      flex: 1;
      color: #666666;
      text-overflow: ellipsis;
      line-height: 1.4;
      overflow: hidden;
      white-space: nowrap;
      box-sizing: border-box;
      padding-left: 20px;

      span {
        line-height: 60px;
      }

      .geli {
        padding-left: 3px;
        padding-right: 3px;
      }
    }

    .album {
      flex: 0 0 220px;
      color: #666666;
      line-height: 60px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding-left: 20px;
    }

    .duration {
      flex: 0 0 80px;
      color: #666666;
      line-height: 60px;
    }
  }

  .playlistItem {
    cursor: default;

    &:hover {
      background-color: #e2e2e2;
    }
  }

  .playlistActive {
    background-color: #cccccc !important;

    .kongbai {

      .index {
        color: #ec4141;
      }
    }

    .title {

      .title-name {
        color: #ec4141;
      }
    }
  }
}

.comment {
  padding: 0 20px 20px 20px;
}
</style>
